import React, { useState, useRef, useEffect } from 'react';
import './CommentSection.css'; // 引入CSS样式
import axios from 'axios';
import { generateRandomChineseName } from '../util/Util';


// 初始评论数据
const initialComments = [
];

const myAvatar = 'https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/b2c-seo-urls/b2c-explore-seo-urls/images/64578395600ccaffaa73a0683252b416_dd-887613-90-e-3-4-bfd-8-b-77-b-3-f-39-e-3-b-40-fc.png'

const CommentSection = () => {
    const [comments, setComments] = useState(initialComments);
    const [newComment, setNewComment] = useState('');
    const [activeTab, setActiveTab] = useState('latest'); // 'latest' or 'hottest'

    async function getComments() {
        const res = await axios.get('http://localhost:8080/s4/comment/queryComments');
        setComments(res.data);
    }

    useEffect(() => {
        getComments();
    }, []);


    function Item({comment, deleteComment}) {
        return(
            <div key={comment.id} className="comment-item">
            <img src={comment.avatar} alt="avatar" className="avatar" />
            <div className="comment-content">
                <p className="author">{comment.author}</p>
                <p className="text">{comment.content}</p>
                <div className="comment-footer">
                    <span className="timestamp">{comment.createDate}</span>
                    <span className="likes">点赞数:{comment.likes}</span>
                    <span className="delete" onClick={() => handleDeleteComment(comment.id)}>
                        删除
                    </span>
                </div>
            </div>
        </div>
        )
    }
    

    // 处理发布评论
     async function handlePostComment(){
        if (newComment.trim() === '') return; // 不发布空评论

        const newCommentObj = {
            author: generateRandomChineseName(), // 模拟当前用户
            content: newComment,
            likes: Math.floor(Math.random() * 100000),
            avatar: myAvatar
        };

        setNewComment(''); // 清空输入框
        commentRef.current.focus();
        const result =  await axios.post('http://localhost:8080/s4/comment/addComment', newCommentObj);
        console.log(result);
        getComments();
    }

    // 处理删除评论
    async function handleDeleteComment(commentId){
        const result =  await axios.get(`http://localhost:8080/s4/comment/deleteComment?id=${commentId}`);
        console.log(result);
        getComments();
    }

    const commentRef = useRef(null);



    return (
        <div className="comment-section">
            <div className="comment-header">
                <span className="title">评论</span>
                <div className="tabs">
                    <span
                        className={activeTab === 'latest' ? 'tab active' : 'tab'}
                        onClick={() => setActiveTab('latest')}
                    >
                        最新
                    </span>
                    <span className="divider">|</span>
                    <span
                        className={activeTab === 'hottest' ? 'tab active' : 'tab'}
                        onClick={() => setActiveTab('hottest')}
                    >
                        最热
                    </span>
                </div>
            </div>

            <div className="comment-form">
                <img src={myAvatar} alt="avatar" className="avatar" />
                <textarea rows="8" cols="50"
                    type="text"
                    // className="comment-input"
                    placeholder="发表一条友善的评论"
                    value={newComment}
                    ref={commentRef}
                    onChange={(e) => setNewComment(e.target.value)}
                />
                <button className="post-button" onClick={handlePostComment}>
                    发布
                </button>
            </div>

            <div className="comment-list">
                {comments.map((comment) => (
                    <Item key={comment.id} comment={comment} deleteComment={handleDeleteComment}/>
                ))}
            </div>
        </div>
    );
};

export default CommentSection;